<template>
  <el-menu
    :default-active="this.path"
    router
    style="width: 200px; height: 100%; min-height: calc(100vh - 40px)"
    unique-opened
  >
    <div
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 11px 0;
      "
    >
      <img alt="" src="@/assets/logo.png" style="width: 180px" />
    </div>
    <el-menu-item index="/home">
      <el-icon>
        <house />
      </el-icon>
      <span>首页</span>
    </el-menu-item>

    <template v-for="menu in this.menuList" :key="menu.meta.title">
      <!-- 有子菜单的情况 -->
      <el-sub-menu
        v-if="menu.children && menu.children.length"
        :index="menu.meta.orderNum"
      >
        <template #title>
          <el-icon v-if="menu.meta.icon">
            <component :is="menu.meta.icon" />
          </el-icon>
          <span>{{ menu.meta.title }}</span>
        </template>
        <!-- 遍历二级菜单 -->
        <el-menu-item
          v-for="child in menu.children"
          :key="child.path"
          :index="child.path"
        >
          <span>{{ child.meta.title }}</span>
        </el-menu-item>
      </el-sub-menu>
      <!-- 没有子菜单的情况 -->
      <el-menu-item v-else :index="menu.path">
        <el-icon v-if="menu.meta.icon">
          <component :is="menu.meta.icon" />
        </el-icon>
        <span>{{ menu.meta.title }}</span>
      </el-menu-item>
    </template>
    <!-- <el-menu-item v-if="this.judgeIdentity() !== 1" index="/lm">
      <el-icon><Phone /></el-icon>
      <span>聊天</span>
    </el-menu-item> -->

    <el-menu-item index="/selfInfo">
      <el-icon>
        <setting />
      </el-icon>
      <span>个人信息</span>
    </el-menu-item>
  </el-menu>
  <!-- 
    <el-sub-menu v-if="this.judgeIdentity() !== 0" index="1">
      <template #title>
        <el-icon><Key /></el-icon>
        <span>权限管理</span>
      </template>
      <el-menu-item v-if="this.judgeIdentity() === 3" index="/sysRoleList"
        >角色管理</el-menu-item
      >
      <el-menu-item v-if="this.judgeIdentity() === 3" index="/sysMenuList"
        >菜单管理</el-menu-item
      >
    </el-sub-menu>

    <el-sub-menu v-if="this.judgeIdentity() !== 0" index="2">
      <template #title>
        <el-icon>
          <user />
        </el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/StuInfo"
        >学生信息</el-menu-item
      >
      <el-menu-item v-if="this.judgeIdentity() === 3" index="/dormManagerInfo"
        >宿管信息</el-menu-item
      >
      <el-menu-item v-if="this.judgeIdentity() === 3" index="/teacherInfo"
        >辅导员信息</el-menu-item
      >
    </el-sub-menu>

    <el-sub-menu v-if="this.judgeIdentity() !== 0" index="3">
      <template #title>
        <el-icon>
          <coin />
        </el-icon>
        <span>宿舍管理</span>
      </template>
      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/buildingInfo"
        >楼宇信息</el-menu-item
      >
      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/roomInfo"
        >房间信息</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu v-if="this.judgeIdentity() !== 0" index="4">
      <template #title>
        <el-icon>
          <message />
        </el-icon>
        <span>信息管理</span>
      </template>
      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/noticeInfo"
        >公告信息</el-menu-item
      >
      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/repairInfo"
        >报修信息</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>
        <el-icon>
          <pie-chart />
        </el-icon>
        <span>申请管理</span>
      </template>
      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/adjustRoomInfo"
        >调宿申请</el-menu-item
      >

      <el-menu-item v-if="this.judgeIdentity() === 0" index="/visitorInfo">
        <span>访客申请</span>
      </el-menu-item>

      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/teavisitorInfo">
        <span>访客申请审批</span>
      </el-menu-item>

      <el-menu-item v-if="this.judgeIdentity() !== 0" index="/tesLeave">
        <span>请假申请审批</span>
      </el-menu-item>

      <el-menu-item index="/stuLeave">
        <span>请假申请</span>
      </el-menu-item>
    </el-sub-menu>

    <el-menu-item v-if="this.judgeIdentity() === 0" index="/myRoomInfo">
      <el-icon>
        <school />
      </el-icon>
      <span>我的宿舍</span>
    </el-menu-item>
    <el-menu-item v-if="this.judgeIdentity() === 0" index="/stuChangeRoom">
      <el-icon>
        <takeaway-box />
      </el-icon>
      <span>申请调宿</span>
    </el-menu-item>
    <el-menu-item v-if="this.judgeIdentity() === 0" index="/applyRepairInfo">
      <el-icon>
        <set-up />
      </el-icon>
      <span>报修申请</span>
    </el-menu-item>
    <el-sub-menu index="7">
      <template #title>
        <el-icon>
          <set-up />
        </el-icon>
        <span>水电费管理</span>
      </template>
      <el-menu-item index="/WaterInfo">水电费发布</el-menu-item>
      <el-menu-item index="/StuWaterInfo">水电费缴纳</el-menu-item>
      <el-menu-item index="/payhistory">水电费缴纳记录</el-menu-item>
      <el-menu-item index="/waterEcharts">每月水电费统计</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="8">
      <template #title>
        <el-icon><Suitcase /></el-icon>
        <span>卫生管理</span>
      </template>
      <el-menu-item index="/CheckInfo">卫生检查</el-menu-item>
      <el-menu-item index="/Checknum">每日卫生分数统计</el-menu-item>
    </el-sub-menu> -->

  <!-- <el-menu-item index="/CheckInfo">
      <el-icon>
        <tickets />
      </el-icon>
      <span>卫生检查</span>
    </el-menu-item> -->
  <!-- <el-menu-item v-if="this.judgeIdentity() !== 0" index="/applyAbsentRecord">
      <el-icon>
        <tickets />
      </el-icon>
      <span>缺寝记录管理</span>
    </el-menu-item>

    <el-menu-item v-if="this.judgeIdentity() === 0" index="/absentRecord">
      <el-icon>
        <tickets />
      </el-icon>
      <span>缺寝记录查看</span>
    </el-menu-item> -->
</template>

<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";

export default {
  name: "Aside",
  data() {
    return {
      user: {},
      identity: "",
      path: this.$route.path,
      role: {},
      menuList: [],
    };
  },
  created() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    this.load();
    this.init();
  },
  methods: {
    // 加载数据的方法
    async load() {
      request.get("/role/getRoleByUserId/" + this.user.userId).then((res) => {
        console.log(res);
        this.role = res.data.roleId;
        this.tree();
      });
    },
    //权限菜单
    //分配权限树回显
    async tree() {
      request
        .get("/sys-user-role/getMenuList", {
          params: {
            userId: this.user.userId,
            userType: this.role,
          },
        })
        .then((res) => {
          // this.menuList = res.data;
          // 对菜单数据进行排序
          this.menuList = this.sortMenuByOrderNum(res.data);
          console.log("menu", this.menuList);
        });
    },
    // 按orderNum排序菜单的方法
    sortMenuByOrderNum(menuList) {
      if (!menuList || !Array.isArray(menuList)) return [];

      // 对顶级菜单排序
      const sortedMenus = [...menuList].sort((a, b) => {
        const orderA = a.meta?.orderNum || 0;
        const orderB = b.meta?.orderNum || 0;
        return orderA - orderB;
      });

      // 对每个菜单的子菜单排序
      return sortedMenus.map((menu) => {
        if (menu.children && menu.children.length) {
          return {
            ...menu,
            children: this.sortMenuByOrderNum(menu.children),
          };
        }
        return menu;
      });
    },
    init() {
      request.get("/main/loadIdentity").then((res) => {
        if (res.code !== "0") {
          ElMessage({
            message: "用户会话过期",
            type: "error",
          });
          sessionStorage.clear();
          request.get("/main/signOut");
        }
        window.sessionStorage.setItem("identity", JSON.stringify(res.data));
        this.identity = res.data;
      });
      request.get("/main/loadUserInfo").then((result) => {
        if (result.code !== "0") {
          ElMessage({
            message: "用户会话过期",
            type: "error",
          });
          request.get("/main/signOut");
          sessionStorage.clear();
          this.$router.replace({ path: "/login" });
        }
        window.sessionStorage.setItem("user", JSON.stringify(result.data));
        this.user = result.data;
      });
    },
    judgeIdentity() {
      if (this.identity === "stu") {
        return 0;
      } else if (this.identity === "teacher") {
        return 1;
      } else if (this.identity === "dormManager") {
        return 2;
      } else return 3;
    },
  },
};
</script>

<style scoped>
.icon {
  margin-right: 6px;
}

.el-sub-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding: 0 45px;
  min-width: 199px;
}
</style>